<template>
  <div class="page-container page-builder">
    <canvas ref="canvas"></canvas>
    <StatePanel name="test" :fps="fps" @save="bindSave" />
    <AnchorPanel v-show="focused" :focused="focused" @del="bindDel" />
  </div>
</template>
<script lang="ts">
import { AbstractMesh } from '@babylonjs/core'
import { defineComponent, onMounted, ref } from 'vue'
import StatePanel from '@/components/StatePanel.vue'
import AnchorPanel from '@/components/AnchorPanel.vue'

import useAnchor from '@/plugins/useAnchor'
import useCanvas from '@/plugins/useCanvas'

export default defineComponent({
  components: {
    StatePanel,
    AnchorPanel
  },
  setup() {
    const canvas = ref<HTMLCanvasElement>()
    const { anchors, focused, bindEvent, bindDel, bindSave } = useAnchor()
    const fps = ref<string>('')

    onMounted(() => {
      if (!canvas.value) return
      const {createScene, engine } = useCanvas(canvas.value)
      const scene = createScene('test', 'assets/room3.jpg')

      window.addEventListener('resize', function () {
        engine.resize()
      })

      engine.runRenderLoop(function () {
        scene.render()
      })
      // scene.engine.getFps().toFixed() + ' fps'
      const fpsloop = setInterval(() => {
        fps.value = engine.getFps().toFixed() + 'fps'
      }, 100)
      bindEvent(scene)
    })

    return {
      canvas,
      anchors,
      focused,
      fps,
      bindDel,
      bindSave
    }
  }
})
</script>

<style lang="scss" scoped>
.page-builder {
  width: 100vw;
  height: 100vh;

  canvas {
    width: 100vw;
    height: 100vh;
    touch-action: none;
  }
}
</style>
